/**
 * 目标1：获取文章列表并展示
 *  1.1 准备查询参数对象
 *  1.2 获取文章列表数据
 *  1.3 展示到指定的标签结构中
 */

// 1.1 准备查询参数对象
const queryObj = {
  status: "", //文章状态（1-待审核，2-审核通过）空字符串-全部
  channel_id: "", //频道id，不传为全部
  page: "1", //当前页码
  per_page: "2", //每页条数
};
let totalCount = 0; //保存文章总条数
// 封装渲染函数
// 1.2 获取文章列表数据
// 1.3 展示到指定的标签结构中
async function setArtleList() {
  const res = await axios({
    url: "/v1_0/mp/articles",
    params: queryObj,
  });
  console.log(res.data.results);

  const htmlStr = res.data.results
    .map((item) => {
      return `       
                <td>
                  <img src=${
                    item.cover.type === 0
                      ? "https://img2.baidu.com/it/u=2640406343,1419332367&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG?w=708&amp;h=500"
                      : item.cover.images[0]
                  } alt="">
                </td>
                <td>${item.title}</td>
                <td>
                  ${
                    item.status === 2
                      ? `<span class="badge text-bg-success">审核通过</span>`
                      : `<span class="badge text-bg-primary">待审核</span>`
                  } 
                  
                </td>
                <td>
                  <span>${item.pubdate}</span>
                </td>
                <td>
                  <span>${item.read_count}</span>
                </td>
                <td>
                  <span>${item.comment_count}</span>
                </td>
                <td>
                  <span>${item.like_count}</span>
                </td>
                <td data-id="${item.id}">
                  <i class="bi bi-pencil-square edit"></i>
                  <i class="bi bi-trash3 del"></i>
                </td>
              </tr>`;
    })
    .join("");
  document.querySelector(".art-list").innerHTML = htmlStr;
  // 3.1 保存并设置文章总条数
  console.log(queryObj.channel_id);
  console.log(res);

  totalCount = res.data.total_count; //保存文章总条数

  document.querySelector(".total-count").innerHTML = `共${totalCount}条`;
}
setArtleList();
/**
 * 目标2：筛选文章列表
 *  2.1 设置频道列表数据
 *  2.2 监听筛选条件改变，保存查询信息到查询参数对象
 *  2.3 点击筛选时，传递查询参数对象到服务器
 *  2.4 获取匹配数据，覆盖到页面展示
 */
// 2.1 设置频道列表数据
async function setChannleList() {
  const res = await axios({
    url: "/v1_0/channels",
  });
  // console.log(res);
  const htmlStr =
    `<option value="" selected="">请选择文章频道</option>` +
    res.data.channels
      .map((item) => {
        return `
    <option value="${item.id}" >${item.name}</option>

    `;
      })
      .join("");
  document.querySelector(".form-select").innerHTML = htmlStr;
}
// 默认网页运筹调用一次
setChannleList();
// 筛选状态标记数字-》change事件-》绑定到查询参数对象上
document.querySelectorAll(".form-check").forEach((radio) => {
  radio.addEventListener("change", (e) => {
    // console.log(e.target.value);
    queryObj.status = e.target.value;
  });
});
// 筛选评到id-》change事件-》绑定到查询参数对象上
document.querySelector(".form-select").addEventListener("change", (e) => {
  // console.log(e.target.value);
  queryObj.channel_id = e.target.value;
});
// 获取筛选按钮，传递查询参数对象到服务器
document.querySelector(".sel-btn").addEventListener("click", () => {
  // 2.4 获取匹配数据，覆盖到页面展示
  setArtleList();
});
/**
 * 目标3：分页功能
 *  3.1 保存并设置文章总条数
 *  3.2 点击下一页，做临界值判断，并切换页码参数并请求最新数据
 *  3.3 点击上一页，做临界值判断，并切换页码参数并请求最新数据
 */
document.querySelector(".next").addEventListener("click", (e) => {
  // 当前页码小于最大的页码数
  if (queryObj.page < Math.ceil(totalCount / queryObj.per_page)) {
    queryObj.page++;
    document.querySelector(".page-now").innerHTML = `第${queryObj.page}页`;
    setArtleList();
  }
});
document.querySelector(".last").addEventListener("click", (e) => {
  // 当前页码必须大于1的时候才能翻到上一页
  if (queryObj.page > 1) {
    queryObj.page--;
    document.querySelector(".page-now").innerHTML = `第${queryObj.page}页`;
    setArtleList();
  }
});

/**
 * 目标4：删除功能
 *  4.1 关联文章 id 到删除图标
 *  4.2 点击删除时，获取文章 id
 *  4.3 调用删除接口，传递文章 id 到服务器
 *  4.4 重新获取文章列表，并覆盖展示
 *  4.5 删除最后一页的最后一条，需要自动向前翻页
 */
// 4.1 关联文章 id 到删除图标
document.querySelector(".art-list").addEventListener("click", async (e) => {
  // 判断点击的是删除
  if (e.target.classList.contains("del")) {
    const delId = e.target.parentNode.dataset.id;
    //  4.3 调用删除接口，传递文章 id 到服务器
    const res = await axios({
      url: `/v1_0/mp/articles/${delId}`,
      method: "delete",
    });
    // 4.5 删除最后一页的最后一条，需要自动向前翻页
    const children = document.querySelector(".art-list").children;
    if (children.length === 1 && queryObj.page !== 1) {
      queryObj.page--;
      document.querySelector(".page-now").innerHTML = `第${queryObj.page}页`;
    }
    // console.log(res);
    // 4.4 重新获取文章列表，并覆盖展示
    setArtleList();
  }
});

// 点击编辑时，获取文章 id，跳转到发布文章页面传递文章 id 过去
document.querySelector(".art-list").addEventListener("click", (e) => {
  if (e.target.classList.contains("edit")) {
    const artId = e.target.parentNode.dataset.id;
    console.log(artId);
    location.href = `../publish/index.html?id=${artId}`;
  }
});
